<template>
	<div>
		<h4 class="lighter">
			<i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
			<router-link to="/business/course" class=""> {{course.name}} </router-link>
				<span style="margin-left: 5px; margin-right: 10px;">|</span> 
			<i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
			<router-link to="/business/chapter" class=""> {{chapter.name}} </router-link>
		</h4>
		<hr>
		
		<!-- 全局数据操作按钮 -->
		<p>
			<button class="btn btn-white btn-default btn-round" @click="list(1)">
				<i class="ace-icon fa fa-refresh"></i>刷新
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="add">
				<i class="ace-icon glyphicon glyphicon-plus"></i>新增
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="test">
				<i class="ace-icon glyphicon glyphicon-tent" ></i>测试
			</button>
		</p>
		

		<!--模态框 -->
		<div>
			<save id="save-modal" :section="section"></save>
		</div>
		
		<!-- 列表数据 -->
		<table id="simple-table" class="table  table-bordered table-hover">
			<thead>
				<tr>
					<th>id</th>
					<th>小节标题</th>
					<th>课程id</th>
					<th>大章id</th>
					<th>视频</th>
					<th>时长/秒</th>
					<th>是否收费</th>
					<th>顺序</th>
					<th>操作</th>
				</tr>
			</thead>
	
			<tbody>
				<tr v-for="item in sections" :key="item.id">
					<td>{{item.id}}</td>
					<td>{{item.title}}</td>
					<td>{{item.courseId}}</td>
					<td>{{item.chapterId}}</td>
					<td>{{item.video}}</td>
					<td>{{$global.format.formatSecond(item.time)}}</td>
					<td>{{$global.enums.getValue(item.charge, CHARGE)}}</td>
					<td>{{item.sort}}</td>
					<td><operation :section="item"/></td>									
				</tr>
			</tbody>
		</table>
		<div class="paginations">
			<pagination :list="list" ref="pagination"></pagination>
		</div>
	</div>
</template>

<script>
import operation from '@/views/section/components/operation'
import save from '@/views/section/components/save'
import pagination from '@/views/components/pagination'
export default{
	name: 'sections',
	data () {
		return {
			sections: [],
			section: {},
			course: {},
			chapter: {},
			CHARGE: this.$global.enums.CHARGE
		}
	},
	components: {
		operation,
		pagination,
		save
	},
	mounted() {
		let course = this.$global.session.get('course')
		let chapter = this.$global.session.get('chapter')
		if(course == null || chapter == null) this.$router.push('/business/course')
		this.course = course
		this.chapter = chapter
		this.list(1)
	},
	methods: {
		list(page) {
			let param = {pageIndex: page, pageSize: this.$refs.pagination.size, courseId: this.course.id, chapterId: this.chapter.id}
			let url = process.env.VUE_APP_SERVER + 'business/admin/section/list'
			this.$axios.post(url, param)
				.then(res => {
					console.log('section-list')
					let data = res.data.data
					this.sections = data.list
					this.$refs.pagination.render(page, data.total)
				})
		},
		test() {
			let key = hex_md5("adc")
			console.log("key=" + key)
			let key10 = parseInt(key, 16)
			console.log("key10=" + key10)
			let key62 = this.$global.format.tenTo62(key10)
			console.log("key62=" + key62)

		},
		add() {
			this.section = {
				charge: this.CHARGE[0].key,
				video: null
			}
			$('#save-modal').modal('show')			
		}
	}
}
</script>

<style scoped>
	.table{
		margin-bottom: 5px;
	}
	.paginations{
		text-align: right;
	}
</style>
